import React, { ReactElement, useEffect, useState } from 'react';
import { getShopDoor } from '@/api/shop/shop-door';
import ReactEcharts from 'echarts-for-react';

interface Props {}
interface IData {
  shopName: string;
  serviceinfoList: [];
}
export default function ShopCategoryEcharts({}: Props): ReactElement {
  const getData = async () => {
    const res = await getShopDoor();

    if (res.status == 200) {
      const data: IData[] = res.data.rows;
      // console.log(data, 'res');
      let dataA = data.map((item) => {
        if (item.shopName.length > 2) {
          return item.shopName.substr(0, 2) + '...';
        }
      });
      console.log(data, 'dataA');
      let dataB = data.map((item) => item.serviceinfoList.length);
      let option = {
        title: {
          text: '商户项目',
          subtext: '各项目所包含子项目个数',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          data: dataA,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: dataB,
            type: 'bar',
          },
        ],
      };
      setData(option);
    }
  };
  const [option, setData] = useState({});
  useEffect(() => {
    getData();
  }, []);
  return (
    <ReactEcharts
      option={option}
      style={{ height: '300px', width: '80%' }}
      className="react-for-echars"
    ></ReactEcharts>
  );
}
